<template>
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item title="位置和尺寸" name="pos">
      <AStylePositionAndSize :_widget="widget" />
    </el-collapse-item>
    <el-collapse-item title="边框" name="border" v-if="widget.style.borderWidth !== undefined">
      <AStyleBorder :_widget="widget" />
    </el-collapse-item>
    <el-collapse-item title="圆角" name="radius" v-if="widget.style.borderRadius !== undefined">
      <AStyleRadius :_widget="widget" />
    </el-collapse-item>
    <el-collapse-item title="内边距" name="padding" v-if="widget.style.padding !== undefined">
      <AStylePadding :_widget="widget" />
    </el-collapse-item>
    <el-collapse-item title="阴影" name="boxshadow" v-if="widget.style.isBorderShadow !== undefined">
      <AStyleBoxShadow :_widget="widget" />
    </el-collapse-item>
    <el-collapse-item title="背景" name="background" v-if="widget.style.backgroundColorValue !== undefined">
      <AStyleBackground :_widget="widget" />
    </el-collapse-item>
    <el-collapse-item title="文字排版" name="text" v-if="widget.style.text !== undefined">
      <AStyleText :_widget="widget" />
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import type { TypeDesignProvide, TypeWidget } from "@/types/TypeDesign";
import type { PropType } from "vue";

export default defineComponent({
  name: "StylePanel",

  props: {
    widget: {
      type: Object as PropType<TypeWidget>,
      default: () => ({}),
    },
  },

  setup(props, { emit }) {
    const isShowBorder = computed(() => {
      let flag = false;
      if (props.widget.style.borderWidth !== undefined) {
        flag = true;
      }
      console.log("flag-------->", flag, props.widget.style);
      return flag;
    });

    return {
      activeName: "text",
      isShowBorder,
    };
  },
});
</script>

<style scoped></style>
